<template>
  <a-form
    labelAlign="left"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    :colon="false"
  >
    <a-collapse
      v-model:activeKey="activeKey"
      :bordered="false"
      expandIconPosition="right"
    >
      <a-collapse-panel v-if="isSubForm" key="subform" header="嵌套表单">
        <a-form-item label="标题">
          <a-textarea
            v-model:value="record.label"
            :disabled="record.formKey === 'default'"
          />
        </a-form-item>
        <a-form-item label="组件类型">
          <a-select
            v-model:value="record.type"
            :disabled="record.formKey === 'default'"
          >
            <a-select-option key="subForm" value="subForm">
              子表单
            </a-select-option>
            <a-select-option key="groupForm" value="groupForm">
              分组表单
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item v-if="record.type === 'subForm'" label="子表单">
          <a-select v-model:value="record.genConfig.subFormType">
            <a-select-option key="singleRow" value="singleRow">
              单行
            </a-select-option>
            <a-select-option key="multiRow" value="multiRow">
              多行
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-collapse-panel>
      <template v-else>
        <a-collapse-panel key="layout" header="布局">
          <a-form-item label="单行">
            <a-switch v-model:checked="record.singleRow" />
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel key="config" header="表单项配置">
          <a-form-item label="组件类型">
            <a-select v-model:value="record.type" @change="handleTypeChange">
              <a-select-option
                v-for="fieldType in fieldMenuList"
                :key="fieldType.type"
                :value="fieldType.type"
              >
                {{ fieldType.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="标题">
            <a-textarea v-model:value="record.label" />
          </a-form-item>
          <a-form-item label="字段名">
            <a-textarea v-model:value="record.formKey" />
          </a-form-item>
        </a-collapse-panel>
        <a-collapse-panel key="validate" header="验证配置">
          <a-form-item label="必填">
            <a-switch v-model:checked="record.rules.required" />
          </a-form-item>
          <a-form-item label="长度">
            <a-input-number
              v-model:value="record.rules.len"
              :min="0"
              :precision="0"
              style="width: 100%"
            />
          </a-form-item>
        </a-collapse-panel>
      </template>
    </a-collapse>
  </a-form>
</template>

<script setup>
import { ref, computed } from "vue";
import { fieldMenuList } from "@/components/RuntimeComp";
import { fieldFactory } from "@/views/FormGenerator/util";

const props = defineProps({
  record: {
    type: Object,
    required: true,
  },
});
const activeKey = ref(["subform", "layout", "config", "validate"]);

function handleTypeChange(newType) {
  const newRecord = fieldFactory(
    newType,
    props.record.label,
    props.record.formKey,
    [],
    false,
    false
  );
  for (const key of Object.keys(newRecord)) {
    props.record[key] = newRecord[key];
  }
}
const isSubForm = computed(() =>
  ["subForm", "groupForm"].includes(props.record.type)
);
</script>

<style lang="less" scoped></style>
